<!--
 * @Author: YourName
 * @Date: 2024-05-14 13:32:47
 * @LastEditTime: 2024-05-16 10:28:59
 * @LastEditors: YourName
 * @Description: 
 * @FilePath: \冲锋号影视\src\views\PictureAdmin\index.vue
 * 版权声明
-->
<script lang="ts" setup>
import { v4 as uuidv4 } from 'uuid';
import { ref, reactive } from 'vue'
import 'dayjs/locale/zh-cn'
import { onMounted } from 'vue';
const value = ref(false)
import { CloseBold } from '@element-plus/icons-vue'
import { getHomeMulidata, putsaveMediaData, getMediaPage, deleteMedia } from '@/apis/uploadApi'
import { DeleteFilled, Download, Plus, ArrowDown, View } from '@element-plus/icons-vue'
import { resourCeList, createPicture, deletePicture, updatePicture } from '@/apis/resource'
import { PhotoPage } from '@/apis/cameraman'
import { Action, ElMessage } from 'element-plus'
import axios from 'axios'

const dialogFormVisible = ref(false)
let dialogFormVisible1 = ref(false)
let dialogFormVisible2 = ref(false)
let dialogFormVisible3 = ref(false)
let imageList = ref([])
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
let uploadrefss = ref('')
let input2 = ref('')
const value4 = ref('')
const fromRef = ref(null)
let time = ref([])
let mimeType = ref('')
let addId = ref('')
let CurrentPage = ref('')
const input1 = ref('')
let totals = ref()
let allorSomeData = ref('')
let allorSomePage = ref('')
let treeList = ref([])
let updateobject = ref({})
let CameramanId = ref('')
let changeId = ref('')
let OutRepetition = ref('')
let updateList = ref([])
let CameramanList = ref([])
const size = ref<'default' | 'large' | 'small'>('default')
let form = reactive({
    name: '',
    describe: '',
})
let Viewdata = reactive({
    description: '',
    photographerName: '',
    createTime: '',
    mediaType: ''
})

const form1 = reactive({
    name: ''
})
const form2 = reactive({
    name: '',
    describe: '',
    authorId: ''
})
const rules = ref({
    name: [
        { required: true, message: '文件名称是必填项', trigger: 'blur' },
    ],
    value3: [
        { required: true, message: '文件类型是必选项', trigger: 'blur' },
    ],
    describe: [
        { required: true, message: '文件类描述是必填项', trigger: 'change' },
    ],
    value4: [{ required: true, message: '作者姓名必选项', trigger: 'blur' }]
})
let options = ref([])
let options1 = ref([])
interface Tree {
    label: string
    children?: Tree[]
}
async function handleNodeClick(data: Tree) {
    totals.value = ''
    input1.value = ''
    value1.value = ''
    imageList.value = []
    CurrentPage.value = data.id
    const res = await getMediaPage({
        "pageNo": 1,
        "pageSize": 8,
        "contentTypeId": data.id
    })
    imageList.value = res.data.list
    totals.value = Number(res.data.total)
    for (let i = 0; i < imageList.value.length; i++) {
        // 将时间戳转换为Date对象
        const date = new Date(imageList.value[i].createTime);

        // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
        const year = date.getFullYear(); // 获取四位数的年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
        const day = date.getDate().toString().padStart(2, '0'); // 获取日

        // 组合成YYYY-MM-DD格式
        const formattedDate = `${year}-${month}-${day}`;
        imageList.value[i].createTime = formattedDate
    }
}
onMounted(
    getPhoto
)
onMounted(
    getPhotoPage
)
onMounted(getresourCeList)
async function getresourCeList() {
    const res = await resourCeList();
    treeList.value = buildTree(res.data);
    updateList.value = res.data// 使用 map 方法转换数组
    options.value = updateList.value.map(item => {
        return {
            value: item.id, // 使用 item.id 作为 value
            label: item.name // 使用 item.name 作为 label
        };
    });
}
// 获取摄影师名单
async function getPhotoPage() {
    const res = await PhotoPage({
        "pageNo": 1,
        "pageSize": 100
    })
    CameramanList.value = res.data.list
    options1.value = CameramanList.value.map(item => {
        return {
            value: item.id,
            label: item.name
        }
    })
}
async function getPhoto() {
    const res = await getMediaPage({
        "pageNo": 1,
        "pageSize": 8,
    })
    imageList.value = res.data.list
    totals.value = Number(res.data.total)
    for (let i = 0; i < imageList.value.length; i++) {
        // 将时间戳转换为Date对象
        const date = new Date(imageList.value[i].createTime);

        // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
        const year = date.getFullYear(); // 获取四位数的年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
        const day = date.getDate().toString().padStart(2, '0'); // 获取日

        // 组合成YYYY-MM-DD格式
        const formattedDate = `${year}-${month}-${day}`;
        imageList.value[i].createTime = formattedDate
    }


}

// 文件提交
async function toUpload(action) {
    const file = action.file; // 获取文件扩展名
    const fileName = file.name
    const fileExtension = fileName.split('.').pop(); // 获取文件扩展名
    // 生成 UUID 并将其添加到文件名中
    const uuid = uuidv4();
    const newFileName = `${uuid}.${fileExtension}`;

    const fileSizeInBytes = file.size;
    const mimeType = file.type;
    // // 格式化文件大小为可读的字符串，例如 "150 KB", "3.2 MB" 等
    // function formatFileSize(bytes, decimals = 2) {
    //     if (bytes === 0) return '0 Bytes';
    //     const k = 1024;
    //     const dm = decimals < 0 ? 0 : decimals;
    //     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    //     const i = Math.floor(Math.log(bytes) / Math.log(k));
    //     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    // }
    // const formattedFileSize = formatFileSize(fileSizeInBytes);
    
    const imageRegex = /^image\/.+/;

    // 定义大小限制，例如图片不超过 2MB，视频不超过 100MB
    const imageSizeLimit = 2 * 1024 * 1024; // 2MB in bytes
    const videoSizeLimit = 100 * 1024 * 1024; // 100MB in bytes
    if((mimeType.match(imageRegex) && fileSizeInBytes <= imageSizeLimit) || (mimeType.startsWith('video/') && fileSizeInBytes <= videoSizeLimit)){
        try {
// 发送请求到后端接口，获取预签名URL
const res = await getHomeMulidata(newFileName, fileSizeInBytes);
await axios.put(res.data.uploadUrl, action.file, {
    headers: {
        'Content-Type': file.type
    }
})
const mediaData = {
    "configId": 24,
    "path": newFileName,
    "name": form.name,
    "url": res.data.url,
    "type": mimeType,
    "size": fileSizeInBytes,
    "description": form.describe,
    "photographerId": CameramanId,
    "contentTypeId": value3.value
}
// {
//     "configId": 11,
//     "path": newFileName,
//     "name": fileName,
//     "url": res.data.url,
//     "type": "application/octet-stream",
//     "size": 2048,
//     "fileId": 0,
//     "description": "image",
//     "authorId": 123
// }

// 使用预签名的URL和文件进行上传
const num = await putsaveMediaData(mediaData)
if (num.code == 0) {
    ElMessage.success('上传资源成功')
    dialogFormVisible.value = false
    getPhoto()
} else {
    ElMessage.error(num.msg)
}
} catch (error) {
ElMessage.error('Upload error:', error);
}
}
 else{
    dialogFormVisible.value = false
        ElMessage.error('资源体积过大，请压缩后再上传')    
 }
}
// 下载
function toDownload(item) {
    const imageUrl = ref(item.fileUrl)
    // 创建一个a标签
    const link = document.createElement('a');
    link.href = imageUrl.value; // 设置图片URL
    link.download = ''; // 设置下载文件名，留空则使用URL中的文件名

    // 触发点击事件，开始下载
    link.click();

    // 清理DOM，移除创建的a标签
    link.remove();
}
// 删除图片
async function toDeleteFilled(item) {
    const id = item.id
    ElMessageBox.confirm(
        '确定要删除该资源吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await deleteMedia(id);
            if (res.code == 0) {
                ElMessage.success('删除资源成功')
            } else {
                ElMessage.error(res.msg)
            }
            getPhoto()
        })
        .catch(() => {
            ElMessage.info('取消操作')
        })
}

// 搜索功能
async function search() {
    totals.value = ''
    CurrentPage.value = ''
    if (input1.value == '' && value1.value != '' ) {
        const res = await getMediaPage({
            "pageNo": 1,
            "pageSize": 8,
            "createTime": value1.value
        })
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    } else if (input1.value != '' && value1.value == '') {
        CameramanList.value.map(item => {
            if (item.name == input1.value) {
                input2.value = item.id
            }
        })
        if (input2.value === "") {
            ElMessage.error('暂未查到该摄影师信息')
        }
        const res = await getMediaPage({
            "pageNo": 1,
            "pageSize": 8,
            "photographerId": input2.value
        })
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    } else if (value1.value != '' && input1.value != '') {
        CameramanList.value.map(item => {
            if (item.name == input1.value) {
                input2.value = item.id
            }
            return input2.value
        })
        if (input2.value === "") {
            ElMessage.error('暂未查到该摄影师信息')
        }
        const res = await getMediaPage({
            "pageNo": 1,
            "pageSize": 8,
            "photographerId": input2.value,
            "createTime": value1.value
        })
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    }
}
function handleSizeChange(val: number) {
    console.log(`${val} items per page`)
}
// 分页设置
async function handleCurrentChange(val: number) {
    const res = await getMediaPage({
        "pageNo": val,
        "pageSize": 8,
        "contentTypeId": CurrentPage.value
    })
    imageList.value = res.data.list
    totals.value = Number(res.data.total)
    for (let i = 0; i < imageList.value.length; i++) {
        // 将时间戳转换为Date对象
        const date = new Date(imageList.value[i].createTime);

        // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
        const year = date.getFullYear(); // 获取四位数的年份
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
        const day = date.getDate().toString().padStart(2, '0'); // 获取日

        // 组合成YYYY-MM-DD格式
        const formattedDate = `${year}-${month}-${day}`;
        imageList.value[i].createTime = formattedDate
    }
    if (input1.value === '' && value1.value !== '') {
        const res = await getMediaPage({
            "pageNo": val,
            "pageSize": 8,
            "createTime": value1.value
        })
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    } else if (input1.value !== '' && value1.value === '') {
        CameramanList.value.map(item => {
            if (item.name == input1.value) {
                input2.value = item.id
            }
        })
        const res = await getMediaPage({
            "pageNo": val,
            "pageSize": 8,
            "photographerId": input2.value
        })
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
        if (input2.value === "") {
            ElMessage.error('暂未查到该摄影师信息')
        }
    } else if (value1.value !== '' && input1.value !== '') {
        CameramanList.value.map(item => {
            if (item.name == input1.value) {
                input2.value = item.id
            }
            return input2.value
        })
        if (input2.value === "") {
            ElMessage.error('暂未查到该摄影师信息')
        }
        const res = await getMediaPage({
            "pageNo": val,
            "pageSize": 8,
            "photographerId": input2.value,
            "createTime": value1.value
        })
        imageList.value = res.data.list
        totals.value = Number(res.data.total)
        for (let i = 0; i < imageList.value.length; i++) {
            // 将时间戳转换为Date对象
            const date = new Date(imageList.value[i].createTime);

            // 使用Date对象的getFullYear(), getMonth(), and getDate()方法获取年月日
            const year = date.getFullYear(); // 获取四位数的年份
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份是从0开始的，所以需要+1
            const day = date.getDate().toString().padStart(2, '0'); // 获取日

            // 组合成YYYY-MM-DD格式
            const formattedDate = `${year}-${month}-${day}`;
            imageList.value[i].createTime = formattedDate
        }
    }

}

// 树状结构方法
function buildTree(data, parentId = 0) {
    const tree = [];
    data.forEach((item) => {
        if (item.superId === parentId) {
            const children = buildTree(data, item.id); // 递归调用构建子树
            tree.push({
                label: item.name,
                children: children.length ? children : null, // 如果有子节点，则添加子节点数组
                id: item.id
            });
        }
    });
    return tree;
}
// 添加媒体类型
function append(data: Tree) {
    addId.value = data.id
    dialogFormVisible1.value = true
}
// 删除媒体类型
async function remove(data: Tree) {
    ElMessageBox.confirm(
        '确定要删除该文件夹吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await deletePicture({
                "id": data.id
            })
            if (res.code == 0) {
                ElMessage.success('删除文件夹成功')
                getresourCeList()
            } else {
                if (imageList.value.length != 0) {
                    ElMessage.error('无法删除文件夹，因为文件夹下还存在资源')
                }
            }
        })
        .catch(() => {
            ElMessage.info('取消操作')
        })
}
// 点击提交
async function addclassify() {
    try {
        const res = await createPicture({
            "superId": addId.value == '' ? 0 : addId.value,
            "name": form1.name,
            "tenantId": 155
        })
        if (res.code == 0) {
            ElMessage.success('添加文件夹成功')
        } else {
            ElMessage.error(res.msg)
        }
    } catch (error) {
        console.log(error);

    } finally {
        dialogFormVisible1.value = false
        window.location.reload();
    }
}
// 添加根目录
async function addroot() {
    try {
        const res = await createPicture({
            "superId": 0,
            "name": form1.name,
            "tenantId": 1
        })
        if (res.code == 0) {
            ElMessage.success('添加根文件夹成功')
        } else {
            ElMessage.error(res.msg)
        }
    } catch (error) {
        console.log(error);

    } finally {
        dialogFormVisible1.value = false
        getresourCeList()
    }
}
// 修改按钮
async function modification(data: Tree) {
    dialogFormVisible2.value = true
    updateobject.value = data
    OutRepetition.value = data.label
}
function optionsChange(e) {
    changeId = e
}
function CameramanChange(e) {
    CameramanId = e
}
// 修改文件夹提交按钮
async function submitChange() {
    let requestBody = {
        "id": updateobject.value.id,
        "tenantId": 155,
        "superId": value2.value
    }
    if (form2.name.trim()) {
        requestBody.name = form2.name
    } else if (changeId.value !== '') {
        requestBody.superId = changeId
    }
    if (updateobject.value.id === value2.value) {
        ElMessage.error('您不能将文件夹设置为其自身的父级')
    } else {
        const res = await updatePicture(requestBody)
        if (res.code == 0) {
            ElMessage.success('文件夹修改成功')
        } else {
            ElMessage.error(res.msg)
        }
        dialogFormVisible2.value = false
        getresourCeList()
    }
}
function toView(item) {
    console.log(item.description)
    dialogFormVisible3.value = true
    Viewdata.description = item.description
    Viewdata.photographerName = item.photographerName
    Viewdata.createTime = item.createTime
    Viewdata.mediaType = item.mediaType
}
function closeDialogFormVisible() {
    uploadrefss.value.clearFiles()
    dialogFormVisible.value = false
}
function update() {
    form.name = ''
    form.describe = ''
    value3.value = ''
    value4.value = ''
    ElMessageBox.alert('图片仅支持jpg和jpeg的格式，为避免网络卡顿图片大小应为2MB以下，视频大小应为100MB以下', '提示！', {
        confirmButtonText: 'OK',
        callback: (action: Action) => {
            ElMessage({
                type: 'warning',
                message: '其它图片格式可能导致无法正常显示，如资源大小不符会导致无法上传，请压缩后再上传',
            })
        },
    })
    dialogFormVisible.value = true
}
</script>
<template>
    <div class="demo-date-picker">
        <div class="block">
            <span style="font-size: 12px">上传时间</span>
            <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
                value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <div class="block">
            <span style="font-size: 12px">摄影师姓名</span>
            <el-input v-model="input1" style="width: 240px" placeholder="摄影师姓名">
                <template #suffix>
                    <el-icon>
                        <CloseBold @click="input1 = ''" />
                    </el-icon>
                </template>
            </el-input>
        </div>
        <el-button class="button" type="primary" @click="search">搜索</el-button>
        <el-button class="button" type="primary" @click="update">上传文件</el-button>
        <!-- <el-button @click="dialogFormVisible = true" style="margin-left: 90%;margin-top: 10px;">上传文件</el-button> -->
    </div>
    <div class="mian">
        <div class="tree">
            <div style="text-align: center;">文件夹</div>
            <el-button type="primary" style="margin: 5px 10px;width: 120px;"
                @click="addroot, dialogFormVisible1 = true">
                <el-icon>
                    <Plus />
                </el-icon>新建根文件夹</el-button>
            <el-tree style="max-width: 100%" :data="treeList" accordion @node-click="handleNodeClick">
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <span style="margin-left: 10%;">
                            <a @click="append(data)">添加
                            </a>
                            <a @click="remove(data)">删除</a>
                            <a @click="modification(data)">修改</a>
                        </span>
                    </span>
                </template>
            </el-tree>
            <el-dialog v-model="dialogFormVisible2" title="修改文件" width="500" @close="form2.name = '', value2 = ''">
                <el-form :model="form2">
                    <el-form-item label="文件夹新名称" label-width="auto">
                        <el-input v-model="form2.name" placeholder="请输入文件夹名称" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <div style="display: flex;">
                    <div style="margin-top: 10px;margin-right: 27px;">文件位置</div>
                    <el-select v-model="value2" placeholder="请选择文件移动位置" size="large" style="width: 240px" filterable
                        @change="optionsChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible2 = false">取消</el-button>
                        <el-button type="primary" @click="submitChange">
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="dialogFormVisible1" title="新建文件夹" width="500">
                <el-form :model="form1">
                    <el-form-item label="文件夹名称" label-width="auto" required>
                        <el-input v-model="form1.name" placeholder="请输入文件夹名称" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible1 = false">取消</el-button>
                        <el-button type="primary" @click="addclassify">
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class="picture">
            <div>
                <el-dialog v-model="dialogFormVisible" :before-close="closeDialogFormVisible" destroy-on-close="true">
                    <el-form label-width="120px" :model="form" style="max-width: 600px" :rules="rules" ref="fromRef">
                        <el-form-item label="文件名称" prop="name">
                            <el-input v-model="form.name" />
                        </el-form-item>
                        <el-form-item label="文件类型" prop="value3">
                            <el-select v-model="value3" placeholder="请选择文件类型" size="large" style="width: 240px"
                                filterable @change="optionsChange">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="文件描述" prop="describe">
                            <el-input v-model="form.describe" />
                        </el-form-item>
                        <el-form-item label="作者姓名" prop="value4">
                            <el-select v-model="value4" placeholder="请选择作者姓名" size="large" style="width: 240px"
                                filterable @change="CameramanChange">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="上传文件">
                            <el-upload class="upload-demo" :http-request="toUpload" show-file-list :limit="3"
                                ref="uploadrefss">
                                <el-button type="primary"
                                    :disabled="form.name == '' ? true : value3 == '' ? true : form.describe == '' ? true : value4 == '' ? true : false">点击上传</el-button>
                                <template #tip>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
            <div class="imgbox">
                <div class="box" v-for="(item, index) in imageList" :key="index">
                    <el-card>
                        <div v-if="item.mediaType == 'video/mp4'" style="margin-top: -20px;margin-left: 25%;">
                            <el-icon style="color: black;" @click="toDownload(item)">
                                <Download />
                            </el-icon>
                            <el-icon style="color: black;margin-left: 50px;" @click="toDeleteFilled(item)">
                                <DeleteFilled />
                            </el-icon>
                            <el-icon style="color: black;margin-left: 50px;" @click="toView(item)">
                                <View />
                            </el-icon>
                        </div>
                        <img class="img" :src=item.fileUrl alt=""
                            v-if="item.mediaType == 'image/jpeg' || item.mediaType == 'image/avif'">
                        <video class="img" width="100%" height="100%" controls :src="item.fileUrl"
                            v-if="item.mediaType == 'video/mp4'">
                        </video>
                        <div class="menu" v-if="item.mediaType != 'video/mp4'">
                            <div class="icon">
                                <el-icon style="color: white;" @click="toDownload(item)">
                                    <Download />
                                </el-icon>
                                <el-icon style="color: white;margin-left: 50px;" @click="toDeleteFilled(item)">
                                    <DeleteFilled />
                                </el-icon>
                            </div>
                            <div class="message">
                                文件描述:"{{ item.description }}"
                            </div>
                            <div class="message">
                                摄影师姓名:{{ item.photographerName }}
                            </div>
                            <div class="message">
                                创建时间:{{ item.createTime }}
                            </div>
                            <div class="message">
                                资源类型:{{ item.mediaType == "video/mp4" ? '视频' : "image/jpeg" ? '图片' : '其他类型' }}
                            </div>
                        </div>
                        </img>
                        <span class="span">{{ item.fileName }}</span>
                    </el-card>
                </div>
                <el-dialog v-model="dialogFormVisible3" title="视频详情" width="500">
                    <div class="message1">
                        文件描述:"{{ Viewdata.description }}"
                    </div>
                    <div class="message1">
                        摄影师姓名:{{ Viewdata.photographerName }}
                    </div>
                    <div class="message1">
                        创建时间:{{ Viewdata.createTime }}
                    </div>
                    <div class="message1">
                        资源类型:{{ Viewdata.mediaType == "video/mp4" ? '视频' : "image/jpeg" ? '图片' : '其他类型' }}
                    </div>
                </el-dialog>
                <div style="width: 100%; height: 60px;">
                <div class="example-pagination-block">
                    <el-pagination layout="prev, pager, next" :total='totals' :page-size='8'
                        :hide-on-single-page="value" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.demo-date-picker {
    display: flex;
    justify-content: space-around;
    background-color: #f0f0f0;
}

.block {
    padding: 20px 20px;
}

.icon {
    align-items: center;
    margin: 5px 35%;
}

.message {
    color: #fff;
    margin: 5px 10px;
}

.message1 {
    margin: 5px 10px;
}

.button {
    margin-top: 20px;
    margin-right: 80px;
}

.mian {
    width: 100%;
    height: 100%;
    display: flex;
}

.tree {
    height: 100%;
    width: 250px;
    border-right: 1px solid #f0f0f0;
}

.picture {
    flex: 1;
}

.btn {
    margin: 10px 0 10px 650px;
}

.span {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    /* 保持文本在一行显示 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
    padding-top: -20px;
}

.imgbox {
    flex: 1;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #f8f9fc;
    height: 700px;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    /* 初始高度为0 */
    background: white;
    /* 半透明背景，根据需要调整 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    /* 确保按钮可以点击 */
    z-index: 10;
}

.menu {
    margin-left: -20px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31, 31, 31, 0.6);
    display: none;
    transition: opacity 0.3s;
    cursor: pointer;
}


.box:hover .menu {
    display: block;
}

.box {
    display: inline-block;
    position: relative;
    margin: 10px 0px 10px 10px;
    position: relative;
    width: 300px;
    overflow: hidden;
    height: 300px;

}

.img {
    display: block;
    width: 250px;
    /* 使图片宽度适应盒子宽度 */
    height: 250px;
    /* 使图片高度适应盒子高度 */
    object-fit: cover;
}

.video {
    display: block;

    width: 100%;
    /* 使图片宽度适应盒子宽度 */
    height: 100%;
    /* 使图片高度适应盒子高度 */
    object-fit: cover;
}

.example-pagination-block {
    margin-left: 80%;
    height: auto;
}
</style>